<template>
  <el-dialog title="衍生逻辑配置" :visible.sync="dialogVisible" width="60%">

    <div class="ed-yyds-set-div">
      <!-- 可视化数据 -->
      <div class="ed-yyds-visualization-div">
        <draw :cols="cols" :symbols="symbols" :types="types" :data="data"></draw>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="sumbit()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import draw from '@/views/page/kong/draw'
export default {
  components: { draw },
  data() {
    return {
      dialogVisible: true,
      cols: [{
        "columnName": "name",
        "dimensionName": "指标名称",
        "dataType": "VARCHAR"
      },
      {
        "columnName": "dept_id",
        "dimensionName": "部门",
        "dataType": "VARCHAR"
      },
      {
        "columnName": "date",
        "dimensionName": "日期维度",
        "dataType": "DATE"
      },
      {
        "columnName": "time",
        "dimensionName": "时间维度",
        "dataType": "DATETIME"
      },
      {
        "columnName": "value",
        "dimensionName": "指标值",
        "dataType": "INT"
      }],
      symbols: [{
        label: '>',
        value: '>'
      }, {
        label: '<',
        value: '<'
      }, {
        label: '=',
        value: '='
      }, {
        label: '>=',
        value: '>='
      }, {
        label: '<=',
        value: '<='
      }, {
        label: '包含',
        value: '包含'
      }, {
        label: '介于',
        value: '介于'
      }],
      types: [{
        label: '数字',
        value: 'Number'
      }, {
        label: '字符串',
        value: 'String'
      }, {
        label: '布尔值',
        value: 'Boolean'
      }],
      data: [{
        id: '0',
        logicalConnective: '',
        col: '',
        symbol: '',
        type: '',
        value: ''
      }],
    }
  },

  mounted() {
  },

  methods: {
    init(str) {
      this.str = str
      this.dialogVisible = true
    },


    sumbit() {
      let str = this.getStr(this.data)
      if (str) {
        console.log('最终结果---->>> ', str)
      } else {
        this.$message.warning('数据填写不完整，请确认后重试！')
      }
    },

    getStr(data) {
      let str = ''
      let pass = true
      data.forEach((item, index) => {
        if (item.children) {
          if (item.logicalConnective === '' && index !== 0) { pass = false }
          str += item.logicalConnective + ' ( '
          let d = this.getStr(item.children)
          if (d) { str += d + ' ) ' } else { pass = false }
        } else {
          let temp = item.value
          if (item.symbol === '介于') {
            temp = '[' + temp + ']'
          }
          str += item.logicalConnective + ' ' + item.col + ' ' + item.symbol + ' ' + temp + ' '
          if (item.symbol === '' || item.col === '' || item.value === '') {
            pass = false
          }
          if (item.logicalConnective === '' && index !== 0) {
            pass = false
          }
        }
      })
      if (pass) {
        return str.trim()
      } else {
        return null
      }
    }

  },
}
</script>

<style scoped>
.ed-yyds-set-div {
  width: 100%;
  margin-top: 20px;
}

.ed-yyds-visualization-div {
  height: 400px;
  overflow: scroll;
  white-space: nowrap;
}
</style>